<nz-page-header nzGhost="false">
    <nz-page-header-title>用户管理</nz-page-header-title>
    <nz-page-header-subtitle>Materal-ConfigCenter</nz-page-header-subtitle>
    <nz-page-header-extra>
        <nz-button-group>
            <button nz-button [disabled]="dataLoading" (click)="openDrawer(null)" title="添加用户"><i nz-icon nzType="user-add"></i></button>
        </nz-button-group>
    </nz-page-header-extra>
    <nz-page-header-content>
        <form nz-form [formGroup]="searchModel" autocomplete="off">
            <div nz-row nzGutter="24">
                <nz-form-item nz-col nzSpan="6">
                    <nz-form-control>
                        <input type="search" nz-input placeholder="账号" formControlName="account" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-col nzSpan="2">
                    <nz-form-control>
                        <button nz-button nzType="primary" (click)="search(1)" title="查询"><i nz-icon nzType="search"></i></button>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </form>
    </nz-page-header-content>
</nz-page-header>
<nz-table #filterTable nzFrontPagination="false" [nzData]="tableData" [nzLoading]="dataLoading" [nzTotal]="pageModel.DataCount" [nzPageIndex]="pageModel.PageIndex" [nzPageSize]="pageModel.PageSize" (nzPageIndexChange)="onPageChange($event)">
    <thead>
        <tr>
            <th>账号</th>
            <th nzWidth="100px">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of tableData">
            <td>{{ data.Account }}</td>
            <td>
                <nz-button-group>
                    <button nz-button (click)="openDrawer(data.ID)" title="编辑"><i nz-icon nzType="edit"></i></button>
                    <button nz-button nzType="danger" title="删除" nz-popconfirm nzPopconfirmTitle="确认删除该用户吗？" nzPopconfirmPlacement="top" (nzOnConfirm)="deleteUser(data.ID)"><i nz-icon nzType="delete"></i></button>
                </nz-button-group>
            </td>
        </tr>
    </tbody>
</nz-table>
<nz-drawer [nzVisible]="drawerVisible" [nzTitle]="isAdd?'添加用户':'修改用户'" (nzOnClose)="closeDrawer()">
    <app-user-edit #userEditComponent (saveEnd)="saveEnd($event)"></app-user-edit>
</nz-drawer>